<#assign ctx=springMacroRequestContext.contextPath />
<#include "/macro/publicMacro.ftl">
<#import "/macro/pagination.ftl" as Pagination>
<#import "/macro/FormItem.ftl" as Form>
<#import "/macro/Dialog.ftl" as Dialog>

<@header title="编辑文章">
    <link href="${ctx}/resource/frame/datetimepicker/jquery.datetimepicker.min.css" rel="stylesheet">
    <link href="${ctx}/resource/frame/bootstrap-input/themes/explorer-fas/theme.min.css" rel="stylesheet">
    <link href="${ctx}/resource/frame/bootstrap-input/css/fileinput.min.css" rel="stylesheet">
    <link href="${ctx}/resource/frame/fileupload/css/jquery.fileupload.css" rel="stylesheet">
    <link href="${ctx}/resource/frame/fileupload/css/jquery.fileupload-ui.css" rel="stylesheet">
    <link href="${ctx}/resource/frame/jquery-ui/jquery-ui.min.css" rel="stylesheet">

</@header>

<@body>
    <h2 class="module-title">编辑文章</h2>

    <div class="alert alert-primary" role="alert">
        <button class="btn btn-info" onclick="javascript: history.back(-1);return false;" >返回</button>
    </div>

    <div style="display: none">
        <form class="fileupload" method="POST" enctype="multipart/form-data">
            <input type="file" id="mainImage2" name="mainImage2">
        </form>
        <form class="fileupload" method="POST" enctype="multipart/form-data">
            <input type="file" name="subImage2[]" id="subImage2" multiple>
        </form>
    </div>

    <form class="form-horizontal" id="cmsArticleForm" action="${ctx}/cmsArticle/save" method="post" onsubmit="return save();">  <!-- enctype="multipart/form-data" -->
        <input type="hidden" name="id" value="${cmsArticle.id}"/>
        <@Form.FormItem name="tenantId" label="租户id">
            <select class="form-control" name="tenantId" id="tenantId">
                <#list tenants as tenant>
                    <option value="${tenant.id}" <#if tenant.id == cmsArticle.tenantId>selected</#if>>${tenant.description}</option>
                </#list>
            </select>
        </@Form.FormItem>
        <@Form.FormItem name="type" label="文章类型">
            <select class="form-control" name="type" id="type">
                <#list articleTypes as atype>
                    <option value="${atype}" >${atype.desc}</option>
                </#list>
            </select>
        </@Form.FormItem>
        <@Form.FormItem name="title" label="标题名称" id="titlePane">
            <input type="text" class="form-control" name="title" id="title" aria-describedby="标题名称" value="${cmsArticle.title}">
        </@Form.FormItem>

        <@Form.FormItem name="subTitle" label="子标题" id="subTitlePane">
            <input type="text" class="form-control" name="subTitle" id="subTitle" aria-describedby="子标题" value="${cmsArticle.subTitle}">
        </@Form.FormItem>
        <@Form.FormItem name="mainImage" label="主图片" id="mainImagePane" style="height: 240px">
            <div class="form-group">
                <div class="custom-file" id="mainImageDiv">
                    <button id="btnUploadMainFile" type="button" class="btn btn-primary" style="margin-bottom: 5px">上传主图</button>
                    <input type="hidden" id="mainImage" name="mainImage" value="${cmsArticle.mainImage}">
                    <div class="bar" style="width: 0%;"></div>
                    <#if cmsArticle.mainImage??>
                        <img id="uploadimg" class="img-thumbnail" width="200px" height="200px" src="${cmsArticle.mainImage}"/>
                    </#if>
                </div>
            </div>
        </@Form.FormItem>
        <@Form.FormItem name="subImages" label="子图片" id="subImagesPane" style="height: 260px">
            <div class="form-group">
                <div class="custom-file" id="subImageDiv">
                    <button id="btnUploadMainFile2" type="button" class="btn btn-primary" style="margin-bottom: 5px">上传子图</button>
                    <input type="hidden" id="subImages" name="subImages[]">
                    <div class="bar" style="width: 0%;"></div>
                    <ul class="list-group list-group-horizontal" id="imageList">

                    </ul>
                </div>
            </div>
        </@Form.FormItem>
        <@Form.FormItem name="content" label="内容">
            <input type="hidden" name="content" id="content"/>
            <input type="textarea" class="form-control" name="contentEditor" id="contentEditor" aria-describedby="内容">
        </@Form.FormItem>
        <@Form.FormItem name="enable" label="是否可用">
            <select class="form-control" name="enable" id="enable">
                <#list statusValues as status>
                    <option value="${status}" <#if status == cmsArticle.enable>selected</#if>>${status.desc}</option>
                </#list>
            </select>
        </@Form.FormItem>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary">提交</button>
            </div>
        </div>
    </form>

    <@Dialog.Dialog id="dialog" title="">
        <div id="dialog_body"></div>
    </@Dialog.Dialog>
</@body>

<@footer>
    <script src="${ctx}/resource/frame/datetimepicker/jquery.datetimepicker.full.min.js"></script>
    <script src="${ctx}/resource/common/js/jquery.validate.min.js"></script>
    <script src="${ctx}/resource/common/js/validate_zh.js"></script>
    <script src="${ctx}/resource/common/js/ckeditorConfig.js"></script>
    <script src="${ctx}/resource/frame/ckeditor/ckeditor.js"></script>

    <script src="${ctx}/resource/frame/jquery-ui/jquery-ui.min.js"></script>
    <script src="${ctx}/resource/frame/fileupload/js/jquery.fileupload.js"></script>
    <script src="${ctx}/resource/frame/fileupload/js/jquery.fileupload-ui.js"></script>
    <#--<script src="${ctx}/resource/frame/fileupload/js/jquery.fileupload-validate.js"></script>-->
    <script src="${ctx}/resource/frame/fileupload/js/jquery.fileupload-process.js"></script>
    <script src="${ctx}/resource/frame/fileupload/js/jquery.fileupload-image.js"></script>
    <script src="${ctx}/resource/frame/fileupload/js/vendor/jquery.ui.widget.js"></script>
    <script src="${ctx}/resource/frame/fileupload/js/cors/jquery.xdr-transport.js"></script>

    <script type="text/javascript">
        var editor = initCkeditor('contentEditor', "${ctx}");
        editor.setData('${cmsArticle.content}');
        var maxFileCount = 0;
        var subImageStr = '${cmsArticle.subImages}';
        var subImages = [];
        if (subImageStr != '') {
            subImages = subImageStr.split(",");
            for(var i=0; i<subImages.length; i++) {
                $("#imageList").append(buildImg(subImages[i]));
            }
        }
        console.info("subImages", subImages);

        function save() {
            if (maxFileCount != 0 && subImages.length != maxFileCount) {
                showDialog("#dialog", "提醒", "请上传" + maxFileCount + "张图片");
                return false;
            }
            var articleContent = editor.getData();
            $("#content").val(articleContent);
            $("#subImages").val(subImages.toString());
            console.info("content:" + articleContent);
            return true;
        }

        $(function () {
            $('#type').change(function(){
                typeChange();
            });

            $("#titlePane").show();
            $("#subTitlePane").hide();
            $("#mainImagePane").hide();
            $("#subImagesPane").hide();

            var articleType = "${cmsArticle.type}";
            if (articleType != '') {
                $("#type").val(articleType).trigger("change");
            }

            $("#btnUploadMainFile").click(function () {
                $("#mainImage2").click();
            });

            $("#btnUploadMainFile2").click(function () {
                $("#subImage2").click();
            });

            $('#subImage2').fileupload({
                type: 'POST',
                url: '${ctx}/common/upload',
                autoUpload: true,
                maxFileCount: maxFileCount,
                paramName: 'upload',
                allowedFileExtensions: ["jpg", "png", "gif"],
                resizeImage: true,
                formData: {upload: $("#subImage2").val()},
                add: function(e, data) {
                    console.info("=======ee=============33+++++", data);
                    if(subImages.length + 1 > maxFileCount) {
                        showDialog("#dialog", "提醒", "子图片不能超过" + maxFileCount + "张");
                        return;
                    }
                    data.submit();
                },
                done: function (e, data) {
                    console.info("done", data.result);
                    $("#imageList").append(buildImg(data.result.url));
                    subImages.push(data.result.url);
                }
            });

            $('#mainImage2').fileupload({
                type: 'POST',
                url: '${ctx}/common/upload',
                autoUpload: false,
                paramName: 'upload',
                formData: {upload: $("#mainImage2").val()},
                disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator && navigator.userAgent),
                imageMaxWidth: 800,
                imageMaxHeight: 800,
                imageCrop: true,
                add: function(e, data) {
                    console.info("add", data);
                    data.submit();
                },
                done: function (e, data) {
                    console.info("done", data);
                    $("#uploadimg").attr({src: data.result.url});
                    $("#uploading").css({width: "400px", height: "400px"});
                    $("#mainImage").val(data.result.url);
                }
            });

            buildFileUpload();

            $("#cmsArticleForm").validate({
                rules: {
                    id: {
                        required: true,
                        digits: true
                    },
                    tenantId: "required" ,
                    title: "required" ,
                    type: "required" ,
                    subTitle: {
                        maxlength: 2048
                    },
                    mainImage: {
                        maxlength: 1024
                    },
                    subImages: {
                        maxlength: 2048
                    },
                    score: {
                        required: true,
                        digits: true
                    },
                    content: "required" ,
                    enable: {
                        required: true
                    },
                    userId: {
                        required: true,
                        digits: true
                    }
                }
            });
        });

        function buildFileUpload() {

        }
        
        function removeImg(obj) {
            var img = $(obj).prev().attr("src");
            var local = $.inArray(img, subImages);
            subImages.splice(local,1);

            $(obj).parent().remove();
        }

        function buildImg(url) {
            return '<li class="list-group-item"><img width="200px" height="200px" src="' + url + '"/>' +
                '<button type="button" onclick="removeImg(this)" class="close" aria-label="Close">\n' +
                '  <span aria-hidden="true">&times;</span>\n' +
                '</button></li>';
        }

        function showDialog(id, title, content) {
            $(id + "_body").html(content);
            $(id + "_title").html(title);
            $("#dialog").modal('show');
        }

        function typeChange() {
            var value=$('#type').children('option:selected').val();//这就是selected的值
            console.info("value:"  + value);
            $("#subImages").removeAttr("data-min-file-count");
            $("#subImages").removeAttr("data-max-file-count");
            maxFileCount = 0;
            if (value == 'title') {
                $("#titlePane").show();
                $("#subTitlePane").hide();
                $("#mainImagePane").hide();
                $("#subImagesPane").hide();
            } else if (value == 'title_picture') {
                $("#titlePane").show();
                $("#subTitlePane").hide();
                $("#mainImagePane").show();
                $("#subImagesPane").hide();
            } else if (value == 'title_picture_big') {
                $("#titlePane").show();
                $("#subTitlePane").hide();
                $("#mainImagePane").show();
                $("#subImagesPane").hide();
            } else if (value == 'title_picture_subTitle') {
                maxFileCount = 1;
                $("#titlePane").show();
                $("#subTitlePane").show();
                $("#mainImagePane").show();
                $("#subImagesPane").show();
            } else if (value == 'title_picture_subP2') {
                $("#titlePane").show();
                $("#subTitlePane").show();
                $("#mainImagePane").show();
                $("#subImagesPane").show();
                $("#subImages").attr("data-min-file-count", 2);
                $("#subImages").attr("data-max-file-count", 2);
                maxFileCount = 2;
            } else if (value == 'title_picture_subP3') {
                $("#titlePane").show();
                $("#subTitlePane").show();
                $("#mainImagePane").show();
                $("#subImagesPane").show();
                $("#subImages").attr("data-min-file-count", 3);
                $("#subImages").attr("data-max-file-count", 3);
                maxFileCount = 3;
            } else if (value == 'title_picture_subP4') {
                $("#titlePane").show();
                $("#subTitlePane").show();
                $("#mainImagePane").show();
                $("#subImagesPane").show();
                $("#subImages").attr("data-min-file-count", 4);
                $("#subImages").attr("data-max-file-count", 4);
                maxFileCount = 4;
            } else if (value == 'title_picture_subP6') {
                $("#titlePane").show();
                $("#subTitlePane").show();
                $("#mainImagePane").show();
                $("#subImagesPane").show();
                $("#subTitle").attr("data-min-file-count", 6);
                $("#subTitle").attr("data-max-file-count", 6);
                maxFileCount = 6;
            } else if (value == 'title_picture_subP8') {
                $("#titlePane").show();
                $("#subTitlePane").show();
                $("#mainImagePane").show();
                $("#subImagesPane").show();
                $("#subImages").attr("data-min-file-count", 8);
                $("#subImages").attr("data-max-file-count", 8);
                maxFileCount = 8;
            } else if (value == 'title_subTitle') {
                $("#titlePane").show();
                $("#subTitlePane").show();
                $("#mainImagePane").hide();
                $("#subImagesPane").hide();
            } else if (value == 'picture') {
                $("#titlePane").hide();
                $("#subTitlePane").hide();
                $("#mainImagePane").show();
                $("#subImagesPane").hide();
            }
        }
    </script>
</@footer>